<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./flexible.js"></script>
    <style>

        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height:100%;
        }
        .cont{
            width:7.5rem;
            height:100%;
            background: red;
            margin: 0 auto;
            position: relative;
        }
        #canvas{
            position: absolute;
            left:0;
            top: 0;
        }
        #two,#font{
            display: none;
        }
        #imgShow{
            width:100%;
            height:100%;
            position: absolute;
            top: 0;
            left:0;
            z-index:12;
        }
    </style>
</head>
<body>
    <div class="cont">
        <canvas id="canvas"></canvas>
        <canvas id="two"></canvas>
        <canvas id="font"></canvas>
        <!--生成的组合生成-->
        <img src="" alt="" id="imgShow">
    </div>

    <script src="./jquery.js"></script>
    <script>
//        bg
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            var image = new Image();
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            context.fillStyle="#ccc";
            context.fillRect(0,0,canvas.width,canvas.height);
            image.src = "./bg.png";
//two
            var twoCanvas = document.getElementById("two");
//            var twoContext = twoCanvas.getContext("2d");
            var twoImage = new Image();
            twoCanvas.width = 150;
            twoCanvas.height = 150;
            twoImage.src = "./head.jpg";
//font
            var fCanvas = document.getElementById("font");
            var fContext = fCanvas.getContext("2d");
            fCanvas.width = window.innerWidth;
            fCanvas.height = 80;
            fContext.font = "bold 28px Arial";
            fContext.textAlign =  "center";
            fContext.fillStyle = "rgba(255,255,255,0.5)";
            fContext.fillText("长按扫描二维码",fCanvas.width/2,fCanvas.height/2);
//            生成
            image.onload = function () {
//bg
                context.drawImage(image,0,0,canvas.width,canvas.height)
//two
                twoImage.onload = function () {
                    context.drawImage(twoImage,canvas.width/2 - twoCanvas.width/2 ,canvas.height - twoCanvas.height-100,twoCanvas.width,twoCanvas.height)
                    imgSrc();
                }
// font
                context.drawImage(fCanvas,0,canvas.height-fCanvas.height,fCanvas.width,fCanvas.height)

            }
            function imgSrc() {
                var imgSrc = canvas.toDataURL("image/png",1);
                var imgShow = document.getElementById('imgShow');
                imgShow.setAttribute('src', imgSrc);
            }

//
//
//document.getElementById("image").src=canvas.toDataURL("name/jpg",1);
 function DPR() {

            if (window.devicePixelRatio && window.devicePixelRatio > 1) {

                return window.devicePixelRatio;

            }

            return 1;

        }

    </script>
</body>
</html>